@charset "UTF-8";

@import "../../sass/_kit/variables.scss";
@import "../../sass/_kit/_mixin.scss";
//
/**
 * 弹出框
 *

 //alert text two btn
<div class="ui-alert show">
    <div class="ui-alert-box">
        <div class="ui-alert-bd">
            这里是内容
        </div>
        <div class="ui-alert-ft">
            <div class="btn-group">
                <button>暂不</button>
                <button class="focus">删除订单</button>
            </div>
        </div>
    </div>
</div>

 //alert text&radio type two btn
<div class="ui-alert" :class="{show:show}">
    <div class="ui-alert-box">
        <div class="ui-alert-bd edit-scope">
            选择修改使用的送礼周期
            <div>
                <label for="ui-radio_01" class="ui-radio">
                    <input id="ui-radio_01" type="radio" name="wishes"/>
                    <div class="sign"></div>
                    这一期
                </label>
                <label for="ui-radio_02" class="ui-radio">
                    <input id="ui-radio_02" type="radio" name="wishes"/>
                    <div class="sign"></div>
                    所有期
                </label>
            </div>
        </div>
        <div class="ui-alert-ft">
            <div class="btn-group">
                <button class="btn btn-pure">暂不</button>
                <button class="btn btn-pure focus">删除订单</button>
            </div>
        </div>
    </div>
</div>

 */
.ui-alert{
    background:rgba(0,0,0,.3);
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:99;
    display:none;
    &.show{
        display:block;
    }
    &-box{
        width:$rem*284;
        padding:$rem*15;
        background:#fff;
        border-radius:$rem*10;
        position:fixed;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:$rem*16;
        color:#646464;
        z-index:101;
    }
    &-bd{
        padding:$rem*20 0;
        text-align:center;
    }
    &-ft{
        border-top:1px solid #DBDBDB;
        padding:$rem*4 0;
        margin-bottom:$rem*-15;
        .btn-group{
            display:flex;
            button{
                display:block;
                height:$rem*44;
                flex-basis:100%;
                text-align:center;
                line-height:$rem*44;
                //焦点按钮
                &.focus{
                    color:$primary-color;
                }
                &:nth-of-type(2){
                    border-left:1px solid #dbdbdb;
                }
            }
        }
        @include clearfix();
    }

}
